<!-- 上下架统计 -->
<template>
  <div class="container">
    <div style="width: 100%; height: 30vh" ref="echarts1"></div>
    <statDatePicker @search="search"></statDatePicker>
    <el-table :data="tableData" height="30vh" border style="width: 100%">
      <el-table-column prop="date" :label="tableFirstTitle"> </el-table-column>
      <el-table-column prop="upBoxNum" label="上架盒次"> </el-table-column>
      <el-table-column prop="upArchiveNum" label="上架件次"> </el-table-column>
      <el-table-column prop="downBoxNum" label="下架盒次"> </el-table-column>
      <el-table-column prop="downArchiveNum" label="下架件次"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { upAndDownStatistics } from '@/api/rfid/board'
import moment from 'moment/moment'
import statDatePicker from '@/components/statDatePicker.vue'

export default {
  name: 'UpAndDownShelves',
  props: {
    activeName: {
      type: String,
      default: 'first',
    },
  },
  components: { statDatePicker },
  data() {
    return {
      formInline: {
        years: '',
        months: '',
        date: '',
      },
      tableFirstTitle: '年份',
      chart: null,
      tableData: [],
      searchData: {},
      xAxisData: [], // 需要的转换x轴坐标的数据
    }
  },
  computed: {},
  watch: {
    // 监听tabs的值
    activeName(newVal) {
      if (newVal === 'first') {
        // 重置echarts
        this.resizeChart()
      }
    },
  },
  created() {},
  mounted() {
    window.addEventListener('resize', () => {
      this.resizeChart()
    })
    this.searchData = {
      type: 'year',
      startDate: moment().subtract(1, 'years').format('YYYY-01-01 00:00:00'),
      endDate: moment().format('YYYY-MM-DD 23:59:59'), //当前的月份
    }
    this.getData(this.searchData)
    this.$nextTick(() => {
      this.initEcharts()
    })
  },
  beforeDestroy() {
    this.disposeChart()
  },
  methods: {
    search(data) {
      if (data.type == 'year') {
        this.tableFirstTitle = '年份'
      } else if (data.type == 'month') {
        this.tableFirstTitle = '月份'
      } else if (data.type == 'day') {
        this.tableFirstTitle = '日期'
      }
      this.getData(data)
    },
    // 处理x轴的数据
    handleXAxisData(data) {
      let header = ['product', '上架盒次', '上架件次', '下架盒次', '下架件次']

      let transformedArr = [header]
      data.forEach((item) => {
        transformedArr.push([
          item.date,
          item.upBoxNum,
          item.upArchiveNum,
          item.downBoxNum,
          item.downArchiveNum,
        ])
      })
      return transformedArr
    },

    // 获取上下架的次据
    getData(param) {
      upAndDownStatistics(param).then((res) => {
        if (res.data.code === 200) {
          this.xAxisData = []
          this.tableData = res.data.data
          this.xAxisData = this.handleXAxisData(res.data.data)
          this.$nextTick(() => {
            this.initEcharts()
          })
        } else {
          this.tableData = []
          this.$message.warning(res.data.message)
        }
      })
    },
    // 重置echarts
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    // 初始化echarts
    initEcharts() {
      this.chart = echarts.init(this.$refs.echarts1)
      var option
      option = {
        title: {},
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '33%',
        },
        legend: {},
        toolbox: {
          right: 10,
          feature: {
            saveAsImage: {},
          },
        },

        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
          },
        },
        yAxis: {},

        dataZoom: [
          {
            startValue: moment().format('YYYY/MM/DD'),
          },
          {
            type: 'inside',
          },
        ],
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
        dataset: {
          source: this.xAxisData,
        },
      }

      option && this.chart.setOption(option)
    },
    // 进行销毁
    disposeChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    },
  },
}
</script>
<style lang="less" scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
}
</style>
